<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>case1.html</title>

		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="this is my page">
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<style type="text/css">
		  body { 
		    color: #000000;
  			font-size: 12px;
		  }
		</style>
	<link rel="stylesheet" type="text/css" href="resource/css/easyui.css">
	<link rel="stylesheet" type="text/css" href="resource/css/icon.css">
	<script type="text/javascript" src="resource/js/jquery.min.js"></script>
	<script type="text/javascript" src="resource/js/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="resource/js/easyui-lang-zh_CN.js"></script>
	
	</head>
    <!-- 
       表格分页：
       1 表格分页工具栏   pagination:true
       2 设置url属性为 后台请求路径
       3 springmvc添加参数 page 表示当前页  rows表示每页显示条数
       4 返回的json格式中  {total:总条数 ,rows:查询数据行 []}
     -->
	<body>
	    <!-- 所有的easyui控件  必须要引用一个独立的样式 
	         data-options 表示控件选项 所有的api查询的属性 都应该被配置在该选项  该选项其实是一个json对象
	    -->
	    	<!------------------- 右键菜单------------------------>
	<div id="myMenu" class="easyui-menu" style="width:120px;">
		<div data-options="name:'new',iconCls:'my-icon-delete'">删除</div>
		<div class="menu-sep"></div>
		<div data-options="name:'save',iconCls:'my-icon-update'">修改</div>
	</div>
	    
	    用户名称：<input class="easyui-textbox" name="name" type="text" id="email" data-options="required:true"></input>
	    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="query()">查询</a>
	    <div style="height:10px"></div>
		<table id="empTable" class="easyui-datagrid" title="用户管理" style="width:1200px;height:900px;">
		<thead>
			<tr>
				<th data-options="field:'id',width:'14%',checkbox:true"></th>
				<!-- <th data-options="field:'id',width:'17%'">用户id</th> -->
				<th data-options="field:'name',width:'25%'">用户</th>
				<th data-options="field:'passwd',width:'25%'">密码</th>
				<th data-options="field:'phone',width:'25%',align:'right'">电话</th>
				<th data-options="field:'status',width:'11%',align:'center',formatter:myFormatter">操作</th>
			</tr>
			
		</thead>
		</table>
	
	 <div id="win" class="easyui-window"  >
	      <form id="ff" method="post" class="easyui-form">
	    	<table cellpadding="5">
	    		<tr style="display:none">
	    			<td>id:</td>
	    			<td><input class="easyui-textbox" type="hidden" name="id" id="id"></input></td>
	    		</tr>
	    		<tr>
	    			<td>用户名称:</td>
	    			<td><input class="easyui-validatebox" type="text" name="name" id="name" data-options="required:true,missingMessage:'用户名称为必填项'"></input></td>
	    		</tr>
	    		<tr>
	    			<td>密码</td>
	    			<td><input class="easyui-textbox" type="text" name="passwd" id="passwd" data-options="required:true,missingMessage:'密码为必填项'"></input></td>
	    		</tr>
	    		<tr>
	    			<td>电话号码</td>
	    			<td><input class="easyui-textbox" type="text" name="phone" id="phone" data-options="required:true,missingMessage:'电话号码为必填项'"></input></td>
	    		</tr>
	    		<tr>
	    			<td></td>
	    			<td>
	    			  <a href="javascript:saveMy()" class="easyui-linkbutton" data-options="iconCls:'icon-save'" style="width:80px">保存</a>
	    			  <a href="javascript:closeMy()" class="easyui-linkbutton" data-options="iconCls:'icon-close'" style="width:80px">关闭</a>
	    			</td>
	    		</tr>
	    	</table>
	    </form>
	</div> 	
	<script type="text/javascript">
	var isAdd=false;
	  $(function(){
		  var selectIndex=0;
		  
		  //初始化表格对象
	      $("#empTable").datagrid({
	           /* singleSelect:true, */
	           collapsible:true,
	           pageList: [10,20,50,100],
	          
	           url:'/query.do',
	           pagination:true,
	           method:'get',
	           rownumbers:true,
	           rownumbers: true,
	           
	           onSelect:function(rowIndex, rowData){
	             
	        	  console.info(rowIndex);
	           },
	           onRowContextMenu:function(e, rowIndex, rowData){
	        	   selectIndex=rowIndex;
		              e.preventDefault();
		              
		              $("#empTable").datagrid("selectRow",rowIndex);
		              
		              $("#myMenu").menu('show', {    
						  left: e.clientX,    
						  top: e.clientY  
				  });  
	           },
			   toolbar:[{
						iconCls: 'icon-reload',
						text:'刷新',
						handler: function(){
						    query();
						}
			 		 },
					'-'
					,{
					   iconCls: 'icon-add',
					   text:'添加',
					   handler: function(){
					   $('#ff').form("clear")
					  $('#win').window('open');
						
							isAdd = true;
						}
			          }
					  ,
						'-',
					  {
						iconCls: 'icon-remove',
						text: '删除',
						handler: function(e) {
						var json=$("#empTable").datagrid("getSelections");
				      	if(json&&json.length>0){
				      		var ids = [];
				      		var index=0;
					       for(var i=0;i<json.length;i++){
					    	   console.info(json[i])
					    	  var a= json[i];
					       	 ids[index++]=a.id;
					       }
				      	  toDelete(ids);	
				      	}else{
				      		$.messager.alert("提示!","请选择要删除的列")
				      	}
				      	
					 }
				   }
			  ]
	      });
	      debugger
	      $("#myMenu").menu({
		         onClick:function(item){    
				    if(item.text=="修改"){ 
				    	debugger
				      	isAdd = false; 
				    	var json=$("#empTable").datagrid("getSelected");
					     if(json){
					     	$("#ff").form("load",json);
					     	$('#win').window('open');
					     	
					     }else{
					     	$.messager.alert("提示!","请选择要修改的列")
					     }
				    }else if(item.text=="删除"){
				       var json=$("#empTable").datagrid("getSelections");
				      	if(json&&json.length>0){
				      		var ids = [];
				      		var index=0;
					       for(var i=0;i<json.length;i++){
					    	   console.info(json[i])
					    	  var a= json[i];
					       	 ids[index++]=a.id;
					       }
				      	  toDelete(ids);	
				      	}else{
				      		$.messager.alert("提示!","请选择要删除的列")
				      	}	
				    }
				 }    
		    });
	      
	      $('#win').window({    
		        closed:true,
		        width:600,    
			    height:400, 			   
			    modal:true 
		     })
	  })
	  /*
	    当行数据被插入时 会自动调用该回调函数  返回结构 渲染在单元格中
	  */
	 /*  function get(){
		 var json=$("#empTable").datagrid("getSelected");
	     $("#ff").form("load",json);
	  } */
	  function myFormatter(value,row,index){
	     return "<input type='image' src='resource/image/delete.ico' onclick='toDelete("+row.id+")'>";
	  }
	  function toDelete(id){
		  debugger
		$.ajax({
			 url:'/dels.do',
             data:'id='+id,
             dataType:"json", 
              success:function(text){
		        if(text==1){
		           
		           alert("删除成功");
		            query();
		            }else{
		              alert("删除失败");
		            }
		       }
          });
	  }
	 
	  //点击查询按钮触发
	  function query(){
	    var val=$("#email").textbox("getValue");
	    $("#empTable").datagrid("load",{name:val})
	  }
	  function closeMy(){
		  $('#win').window('close');  
	  }
	 
	  function saveMy(){
		  /* 插入数据 */
		  if(isAdd){
			  debugger
			  $("#ff").form("submit",{
			     
				 url:'/add.do',
			     success:function(msg){
			      if(msg==1){
			          $.messager.alert('成功','插入用户成功');
			             query();
			           }else{
			             $.messager.alert('错误','插入用户失败失败');
			           }
			        }
			   });
		  }else{
			  debugger
			 $("#ff").form("submit",{
				    
				 	url:'/update.do',
				     success:function(msg){
				      if(msg==1){
				          $.messager.alert('成功','修改成功');
				            
				      }else{
				             $.messager.alert('错误','插入用户失败失败');
				          }
				       }
				   });
		  }
		  $('#ff').form("clear")
		  query();
		  //默认修改
		  
		  isAdd=false;
		  
		  closeMy();
	  	}
	  
	  
	</script>
	</body>
</html>
